<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>医药管理系统数据大屏</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            height: 100vh;
            background-color: #f0f9eb;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 20px;
            padding: 20px;
            box-sizing: border-box;
        }
        .chart-container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="inventory" class="chart-container"></div>
    <div id="suppliers" class="chart-container"></div>
    <div id="purchases" class="chart-container"></div>
    <div id="drugCategories" class="chart-container"></div>

    <script>
        // 配色方案
        const colors = ['#67C23A', '#95D475', '#B3E19D', '#C2E7B0', '#E1F3D8'];
        
        // 库存量Top5药品
        const inventoryChart = echarts.init(document.getElementById('inventory'));
        inventoryChart.setOption({
            title: {
                text: '库存量Top5药品',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            color: colors,
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['阿莫西林', '布洛芬', '青霉素', '维生素C', '感冒灵']
            },
            series: [{
                type: 'bar',
                data: [300, 250, 200, 150, 100]
            }]
        });

        // 供应商分布
        const suppliersChart = echarts.init(document.getElementById('suppliers'));
        suppliersChart.setOption({
            title: {
                text: '供应商地区分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            color: colors,
            series: [{
                type: 'pie',
                radius: '70%',
                data: [
                    {value: 35, name: '北京'},
                    {value: 30, name: '上海'},
                    {value: 20, name: '广州'},
                    {value: 15, name: '深圳'}
                ]
            }]
        });

        // 月度采购趋势
        const purchasesChart = echarts.init(document.getElementById('purchases'));
        purchasesChart.setOption({
            title: {
                text: '月度采购趋势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            color: colors,
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'line',
                data: [150, 230, 224, 218, 135, 147],
                smooth: true,
                areaStyle: {}
            }]
        });

        // 药品类别分布
        const drugCategoriesChart = echarts.init(document.getElementById('drugCategories'));
        drugCategoriesChart.setOption({
            title: {
                text: '药品类别分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            color: colors,
            series: [{
                type: 'pie',
                radius: ['40%', '70%'],
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                data: [
                    {value: 40, name: '抗生素'},
                    {value: 25, name: '消炎药'},
                    {value: 20, name: '维生素'},
                    {value: 15, name: '感冒药'}
                ]
            }]
        });

        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            inventoryChart.resize();
            suppliersChart.resize();
            purchasesChart.resize();
            drugCategoriesChart.resize();
        });
    </script>
</body>
</html>
